<template>
<div class="person">
<h1>情况一:监视ref定义的基本类型数据</h1>
<h2>当前求和为:{{ sum }}</h2>
<button @click="changeNum">点我sum+1</button>
</div>
</template>
<script setup lang="ts" name="person">
import {ref,computed,watch} from 'vue'

let sum = ref(0)

const changeNum = ()=>{
  sum.value += 1
}

//  监视 情况一:监视ref定义的基本类型数据
const stop = watch(sum,(newValue,oldValue)=>{
  console.log("sum变了",newValue,oldValue,sum.value);
  if(newValue >= 10){
    stop()
  }  
})

</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
